<template>
<div>
  <t-navbar title="测试进行中" :fixed="false" left-arrow @left-click="back" />
<!--  倒计时-->
  <div>
    <div style="text-align: center;align-items:center;font-size: 12px;width: 100%;height: 20px">
      <t-count-down :time="time" theme="round" @finish="endExam"> </t-count-down>
    </div>
  </div>
  <t-divider />
<!--  测试题-->
  <div style="clear: both;margin-top: 25px">
    <div style="font-size: 20px;font-weight: bold">{{currIndex+1}}. {{questions[currIndex].question}}？</div>
    <t-divider />
    <div style="font-size: 12px">
      <t-radio-group v-model="answer" >
        <t-radio style="font-size: 12px" name="radio" value="a" :label="questions[currIndex].optiona" ></t-radio>
        <t-radio style="font-size: 12px" name="radio" value="b" :label="questions[currIndex].optionb" />
      </t-radio-group>
    </div>
  </div>

  <!--  回答问题-->
  <div style="margin-top: 10px">
    <t-button theme="light" @click="addAnswer">提交本题</t-button>
  </div>
  <t-dialog
      v-model:visible="showEnd"
      title="是否结束测试"
      content="所有试题均已回答完毕，是否结束本次测试"
      cancel-btn="取消"
      confirm-btn="确认"
      @confirm="endExam"
      @cancel="showEnd=false"
  >
  </t-dialog>
<!--  结束测试 按钮 所有题回答完才会显示-->
  <div style="margin-top: 15px" v-show="btnEnd">
    <t-button theme="primary" @click="endExam" block>结束考试</t-button>
  </div>

<!--  底部 左-上一题 右-下一题 -->
  <t-row style="margin-top: 50px">
    <t-col span="5" >
      <t-button theme="light" @click="changeIndex(1)">上一题</t-button>
    </t-col>
    <t-col span="5" offset="14" class="light">
      <t-button theme="light" @click="changeIndex(2)">下一题</t-button>
    </t-col>
  </t-row>

</div>
</template>

<script setup>
import {ref,reactive,onMounted} from "vue";
import {get,post} from "../util/Request.js";
import {Toast} from "tdesign-mobile-vue";
import {useRouter} from "vue-router";

const router=useRouter()
//倒计时
const time = 10 * 60 * 1000;
const btnEnd=ref(true)
const questions=ref([
  {
    "id": 11,
    "meid": 3,
    "title": "MBTI人格测试",
    "question": "当你要在一个星期内完成一个大项目，你在开始时候会",
    "optiona": "把要做的工作依次列出",
    "optionb": "马上动工",
    "answera": "VSX4",
    "answerb": "FxGP",
    "answer": null,
    "createTime": "2024-11-06 19:52:43",
    "updateTime": "2024-11-06 19:52:43"
  },
  {
    "id": 12,
    "meid": 3,
    "title": "MBTI人格测试",
    "question": "你宁愿被人认为是一个",
    "optiona": "实事求是的人",
    "optionb": "机灵的人",
    "answera": "PJQY",
    "answerb": "tRuN",
    "answer": null,
    "createTime": "2024-11-06 19:52:43",
    "updateTime": "2024-11-06 19:52:43"
  },
  {
    "id": 13,
    "meid": 3,
    "title": "MBTI人格测试",
    "question": "你刚认识的朋友能否说出你的兴趣",
    "optiona": "马上可以",
    "optionb": "要他们真正了解后才可以",
    "answera": "glfe",
    "answerb": "UbV4",
    "answer": null,
    "createTime": "2024-11-06 19:52:43",
    "updateTime": "2024-11-06 19:52:43"
  },
  {
    "id": 14,
    "meid": 3,
    "title": "MBTI人格测试",
    "question": "下面每一对词语中，哪个词语更合你心意",
    "optiona": "利益",
    "optionb": "祝福",
    "answera": "UXUf",
    "answerb": "ZxYp",
    "answer": null,
    "createTime": "2024-11-06 19:52:43",
    "updateTime": "2024-11-06 19:52:43"
  }
])
const currIndex=ref(0)
const answers=ref([])
const answer=ref("")
const showEnd=ref(false)


//生命周期函数 页面渲染之后自动执行
onMounted(()=>{

  //请求接口 开始测试
  get("exam/start?id="+localStorage.getItem("meid")).then(r=>{
    if(r.code==0){
      questions.value=r.data
      for(let i in questions.value){
        answers.value[i]=''
      }
    }else {
      Toast(r.data)
    }
  })
})
const changeIndex=(type)=>{
  console.log(answers.value[currIndex.value])
  if(type==1){
    //上一题
    if(currIndex.value==0){
      //已经是第一题
      Toast("亲，已经是第一题了！")
    }else {
      currIndex.value--
      answer.value=answers.value[currIndex.value]
    }
  }else{
    console.log(questions)
    //下一题
    if(currIndex.value==questions.value.length-1){
      //
      Toast("亲，已经在最后一题啦@")
    }else {
      currIndex.value++
      answer.value=answers.value[currIndex.value]
    }
  }
}
const addAnswer=()=>{
  answers.value[currIndex.value]=answer.value
  console.log(answers.value)
  if(answer.value!=answers.value[currIndex.value]){

    //请求接口 回答问题
    // post("question/answer",{id:questions.value[currIndex.value].id,answer:answer.value}).then(r=>{
    //   if(r.code==0){
    //     answers.value[currIndex.value]=answer.value
    //     //成功 如果有下一题自动显示下一题，没有弹出窗口 确认是否提交(或显示 结束考试的按钮)
    //     if(currIndex.value<questions.value.length-1){
    //
    //       //有下一题
    //       currIndex.value++
    //       answer.value=""
    //     }else{
    //       //没有下一题 提示是否结束
    //       showEnd.value=true
    //     }
    //   }else {
    //     Toast(r.data)
    //   }
    // })
  }

}
const endExam=()=>{
  if(answers.value.length==questions.value.length){

    get("exam/end?id="+localStorage.getItem("meid")).then(r=>{
    // get("exam/end?id=2").then(r=>{
      if(r.code==0){
        Toast("本次测试已结束！")
        //跳转页面 测试列表页面
        router.push("/exam")
      }else{
        Toast(r.data)
      }
    })
  }else {
    Toast("亲，还没回答完！")
  }

}
const back=()=>{
  history.back()
}
</script>

<style scoped>

</style>